<template>
  <div class="left">
    <!-- <div style="margin:0 5px;">
      <el-input
        style="margin-bottom:4px;"
        @input="filterCustomerInput"
        v-model="filterCustomer"
      ></el-input>
    </div> -->
    <div v-for="item in treeData" :key="item.role_id" :class="activeId==item.role_id?'box1 box1Foucs':'box1'" @click="sendData(item)">
      <i class="file"></i>
      <span style="marginLeft:3px">{{ item.name }}</span>
    </div>
    <Add
      @success="getLeftList"
      ref="add"
    ></Add>
    <Edit
      @success="getLeftList"
      ref="edit"
    ></Edit>
  </div>
</template>

<script>
import { debounce } from '@/utils/func.js'
import Add from "./CustomerGroups_add";
import Edit from "./CustomerGroups_edit";
export default {
  name: 'left',
  components:{
    Add,
    Edit,
  },
  data() {
    return {
      filterCustomer:'',
      activeId:'',
      treeData: [],
    }
  },
  computed:{

  },
  created(){
  },
  methods: {
    //点击节点给container组件发送节点信息
    sendData(data){
      eventBus.$emit('sendDataDefaultCustomerPermissions',data)
      this.activeId=data.role_id
    },
    //获取树形数据
    getLeftList(){
      this.$get('getVisibleMemberRoles').then((res) => {
        this.treeData=res.data
      })
    },
    filterCustomerInput:debounce(function(value) {
      this.getLeftList()
    },500),
     add(){
      this.$refs.add.init();
    },
    edit(){
      if (this.activeId==='') {
        this.$message.warning(this.$t('common.message_warn_text'));
      } else {
        if(this.treeData.filter(item=>item.role_id===this.activeId)[0].default==1){
          this.$message.warning(this.$t('DefaultCustomerPermissionsLang.edit_warn_msg'));
        }else{
          this.$refs.edit.init(this.activeId);
        }
      }
    },
    del(){
      if (this.activeId==='') {
        this.$message.warning(this.$t('common.message_warn_text'));
      } else {
        if(this.treeData.filter(item=>item.role_id===this.activeId)[0].default==1){
          this.$message.warning(this.$t('DefaultCustomerPermissionsLang.del_warn_msg'));
        }else{
          let params = new FormData();
          params.append("role_id", this.activeId);
          this.$postForm("delRole", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getLeftList()
            }
          });
        }
      }
    },
  }
}
</script>

<style scoped lang="less">
.left{
  height:  calc(~"100% - 33px");
  padding-top: 5px;
  overflow: auto;
  ::-webkit-scrollbar{
    display: none;
  }
  /*滚动条的轨道*/
  ::-webkit-scrollbar-track{
    display: none;
  }
}
  .box1{
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    margin: 0px 4px;
    border:1px solid transparent;
    cursor: pointer;
    .file{
      width: 16px;
      height: 16px;
      background-image: url(../../assets/img/leaf.gif);
    }
  }
  .box1Foucs{
    background-color: #6c9ee5 ;
  }
  .box1:hover{
    background-color: #6c9ee5 ;
  }
  /deep/.el-input .el-input__inner{
    border-color: #ccc;
  }
  </style>
